import React from "react";
import {useNavigate} from "react-router-dom";
import axios from "axios";

import Particles from 'react-tsparticles'
import { loadFull } from "tsparticles";

import {Form, Input, Button, message} from "antd";
import {UserOutlined, LockOutlined} from "@ant-design/icons";
import './Login.css'

//粒子参数
const options = {
    "background": {
        "color": {
            "value": "rgb(35, 39, 65)"
        },
        "position": "50% 50%",
        "repeat": "no-repeat",
        "size": "cover"
    },
    // 帧数，越低越卡,默认60
    "fpsLimit": 120,
    "fullScreen": {
        "enable": true,
        "zIndex": 1
    },
    "interactivity": {
        "events": {
            "onClick": {
                "enable": true,
                "mode": "push"
            },
            "onHover": {
                "enable": true,
                "mode": "bubble",
                "parallax": {
                    "force": 60
                }
            }
        },
        "modes": {
            "bubble": {
                "distance": 400,
                "duration": 2,
                "opacity": 1,
                "size": 40
            },
            "grab": {
                "distance": 400
            }
        }
    },
    //  粒子的参数
    "particles": {
        //粒子的颜色
        "color": {
            "value": "#ffffff"
        },
        //粒子之间的线的参数
        "links": {
            "color": {
                "value": "#ffffff"
            },
            "distance": 150,
            "opacity": 0.4
        },
        "move": {
            "attract": {
                "rotate": {
                    "x": 600,
                    "y": 1200
                }
            },
            "enable": true,
            "outModes": {
                "default": "bounce",
                "bottom": "bounce",
                "left": "bounce",
                "right": "bounce",
                "top": "bounce"
            },
            "speed": 6
        },
        "number": {
            "density": {
                "enable": true
            },
            //初始粒子数
            "value": 170
        },
        //透明度
        "opacity": {
            "value": 0.5,
            "animation": {
                "speed": 1,
                "minimumValue": 0.1
            }
        },
        // 形状
        "shape": {
            "options": {
                "character": {
                    "fill": false,
                    "font": "Verdana",
                    "style": "",
                    "value": "*",
                    "weight": "400"
                },
                "char": {
                    "fill": false,
                    "font": "Verdana",
                    "style": "",
                    "value": "*",
                    "weight": "400"
                },
                "polygon": {
                    "nb_sides": 5
                },
                "star": {
                    "nb_sides": 5
                },
                "image": {
                    "height": 32,
                    "replace_color": true,
                    "src": "/logo192.png",
                    "width": 32
                },
                "images": {
                    "height": 32,
                    "replace_color": true,
                    "src": "/logo192.png",
                    "width": 32
                }
            },
            "type": "image"
        },
        //大小
        "size": {
            "random": {
                "enable": true
            },
            "value": {
                "min": 1,
                "max": 3
            },
            "animation": {
                "speed": 40,
                "minimumValue": 0.1
            }
        },
        "stroke": {
            "color": {
                "value": "#000000",
                "animation": {
                    "h": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "sync": true
                    },
                    "s": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "sync": true
                    },
                    "l": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "sync": true
                    }
                }
            }
        }
    }
}


export default function Login() {
    const navigate= useNavigate();
    const onLogin = (values) => {
        axios.get(`/api/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`)
            .then(response=>{
                // console.log(response.data);
                const data= response.data;
                if(data.length===0) {
                    message.error('用户名或密码不匹配')
                } else {
                    localStorage.setItem('token', JSON.stringify(data[0]));
                    navigate('/');
                }
            });
    };

    const particlesInit = async (main) => {
        await loadFull(main);
    };
    //粒子被正确加载到画布中时，这个函数被调用
    const particlesLoaded = (container) => {
        // console.log("container", container);
    };

    return (
        <div className="login-container">
            <Particles id="tsparticles" init={particlesInit}
                       loaded={particlesLoaded} options={options} />

            <div className="login-form-wrapper">

                <div className="form-title">新闻发布管理系统</div>

                <Form name="login" className="login-form" onFinish={onLogin} autoComplete="off">
                    <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
                        <Input prefix={<UserOutlined />} placeholder="Username" />
                    </Form.Item>

                    <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                        <Input.Password
                            prefix={<LockOutlined />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

